<!-- <template>
  <el-select :clearable="clearableFlag" ref="selectTable" :size="size" popper-class="select-table" v-model="values"
    @clear="clearVal" @focus="selectFocus" class="select-table">
    <div slot="empty" class="select-box">
      <div class="search-header" v-if="search">
        <el-input v-model.trim="infoName" placeholder="输入名称或编码" size="mini"></el-input>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getTableList">搜索
        </el-button>
      </div>
      <!-- 客户档案  -->
      <el-table v-loading="loading" :data="tableList" @row-click="chooseItem" v-if="dataKey == 'customerInfo'"
        :height="400">
        <el-table-column label="客户名称" align="center" prop="cCusName" />
        <el-table-column label="客户编码" align="center" prop="cCusCode" />
      </el-table>
    </div>
  </el-select>
</template>
<script>
import { listCustomer } from "@/api/customer/customer";

import request from "@/utils/request";

function listCustomer(query) {
  return request({
    url: "/system/customer/list",
    method: "get",
    params: query,
  });
}

import _ from "lodash";
import { allocatedUserList } from "@/api/system/role";
import { listStorage } from "@/api/web/warehouse/storage/storage";
import { listTemp } from "@/api/examine/examine";

const searchList = ['material','supplierInfo'];

export default {
  name: "SelectTable",
  dicts: [
    "mes_status",
    "area_type",
    "common_status",
    "reservoir_strategy",
    "reservoir_attribute",
    "receiving_status",
    "examineTemplateType",
  ],
  props: {
    name: {
      type: String,
    },
    value: {
      type: String,
      default: "",
    },
    dataKey: {
      type: String,
    },
    num: {
      type: Number,
    },
    valueKey: {
      type: [String, Number],
    },
    dataRow: {
      type: [String, Number],
    },
    params: {
      type: [Object, String],
      default: "",
    },
    filterKey: {
      type: Number,
      default: 0,
    },
    showSearch: {
      type: Boolean,
      default: false,
    },
    clearableFlag: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "medium",
    },
    query: {
      dataKey: null,
    },
  },
  data() {
    return {
      search: false,
      loading: true,
      infoName: "",
      tableList: [],
      qualityTypeList: [],
      values: "",
      currentRow: null,
      searchQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      listDataMap: {
        matName: listInquiryInfo,
        inspector: listInspector,
        deptA: listDept,
        deptB: listDeptlist,
        template: listTemplate,
        dept: listDept,
        supplierInfo: listSupplier,
        factory: listFactory,
        material: listMaterialInfo,
        typeName: listTypeInfo,
        user: listUser,
        taxType: listTaxInfo,
        question: listQuestionnaireInfo,
        buyer: allocatedUserList,
        buyerlist: buyerNameList,
        storage: listStorage,
        inspectionitem: listInspectionitem,
        indexTemplate: listTemp,
        technician: technicianList,
        purchaseOrganization: listPurchaseOrganization,
        index: listLndexInfo,
        characteristic: listMatCharacteristic,
      },
    };
  },
  created() {
    console.log(this.dataKey)
    this.search = this.showSearch;
    if (searchList.indexOf(this.dataKey) != -1) {
      this.search = true;
    }
  },
  watch: {
    value: {
      handler: "initValue",
      immediate: true,
    },
  },
  mounted() { },
  methods: {
    clearVal(val) {
      this.$emit("clearVal", this.currentRow);
      this.values = null;
      this.infoName = null;
    },
    initValue(v) {
      this.values = v;
    },
    getTableList() {
      let query = {
        ...this.searchQuery,
        status: 0,
        infoName: this.infoName,
      };
      if (this.params) {
        Object.assign(query, this.params);
      }
      if (this.query && this.query.dataKey) {
        Object.assign(query, this.query.params);
      }
      this.loading = true;
      this.listDataMap[this.dataKey](query).then((res) => {
        if (res.code == 200) {
          this.searchQuery.total = res.total || 0;
          this.tableList = res.rows || res.data;
          this.loading = false;
        }
      });
    },
    selectFocus() {
      this.infoName = "";
      this.searchQuery = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      };
      this.getTableList();
    },
    chooseItem(val) {
      if (this.dataKey === "bom") {
        if (this.num !== undefined && this.num !== null) {
          val.index = this.num;
        }
      }
      this.values = val.name;
      this.$emit("input", val.name);
      if (this.dataRow || this.dataRow === 0) {
        val.rowIndex = this.dataRow;
      }
      val.dataKey = this.dataKey;
      this.$emit("on-change", val);
      this.$refs.selectTable.blur();
      this.currentRow = _.cloneDeep(val);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .select-table {
  width: 100%;
}

.select-box {
  min-width: 600px;
  padding: 10px;
}

.el-select {
  width: 100%;
}

::v-deep .el-select-dropdown {
  padding: 10px 15px;
}

.select-table .search-header {
  display: flex;
}

.search-header {
  margin-bottom: 5px;
}

.search-header button {
  margin-left: 10px;
}
</style> -->
